<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-23 10:50:47
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-17 14:16:24
 * @Description: file content
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
  <title>测试更新的IndexApp</title>
  <script src="./dsbridge.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
  <script>
    const HC = {
      NATIVE: {
        getVersion: function (OBJECT) {
          const {
            success
          } = OBJECT;
          dsBridge.call("NATIVE.getVersion", function (ret) {
            if (ret) {
              success &&
                success({
                  data: ret,
                });
            }
          });
          console.log("HC.NATIVE.getVersion");
        },
        getVersionSync: function () {
          return dsBridge.call("NATIVE.getVersionSync");
          console.log("HC.NATIVE.getVersionSync");
        },
        update: function (OBJECT) {
          const {
            path,
            success,
            fail
          } = OBJECT;
          console.log("HC.NATIVE.update");
          dsBridge.call(
            "NATIVE.update", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              } else {
                fail &&
                  fail({
                    error: "error",
                  });
              }
            }
          );
        },
      },
      APP: {
        getVersion: function (OBJECT) {
          const {
            success,
            fail
          } = OBJECT;
          dsBridge.call("APP.getVersion", function (ret) {
            if (ret) {
              success &&
                success({
                  data: ret,
                });
            } else {
              fail &&
                fail({
                  error: "error",
                });
            }
          });
          console.log("HC.APP.getVersion");
        },
        getVersionSync: function () {
          console.log("HC.APP.getVersionSync");
          return dsBridge.call("APP.getVersionSync");
        },
        update: function (OBJECT) {
          const {
            path,
            success,
            fail
          } = OBJECT;
          console.log("HC.APP.update");
          dsBridge.call(
            "APP.update", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              } else {
                fail &&
                  fail({
                    error: "error",
                  });
              }
            }
          );
        },

        getLang: function (OBJECT) {
          const {
            success
          } = OBJECT;
          dsBridge.call("APP.getLang", function (ret) {
            if (ret) {
              success &&
                success({
                  lang: ret,
                });
            }
          });
          console.log("HC.APP.getLang");
        },
        getLangSync: function () {
          console.log("HC.APP.getLangSync");
          return dsBridge.call("APP.getLangSync");
        },
      },
      IMAGE: {
        choose: function (OBJECT) {
          const {
            count,
            extension,
            sourceType,
            success
          } = OBJECT;
          dsBridge.call(
            "IMAGE.choose", {
            count: count,
            extension: extension,
            sourceType: sourceType,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    tempFilePaths: ret.tempFilePaths,
                    tempFiles: ret.tempFiles,
                  });
              }
            }
          );
          console.log("HC.IMAGE.choose");
        },
        preview: function (OBJECT) {
          const {
            current,
            paths,
            success
          } = OBJECT;
          dsBridge.call(
            "IMAGE.preview", {
            current: current,
            paths: paths,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              }
            }
          );
          console.log("HC.IMAGE.preview");
        },
      },
      VIDEO: {
        choose: function (OBJECT) {
          const {
            extension,
            sourceType,
            success
          } = OBJECT;
          dsBridge.call(
            "VIDEO.choose", {
            extension: extension,
            sourceType: sourceType,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    tempFilePaths: ret.tempFilePaths,
                    tempFiles: ret.tempFiles,
                    duration: 0,
                    size: 0,
                  });
              }
            }
          );
          console.log("HC.VIDEO.choose");
        },
        preview: function (OBJECT) {
          const {
            path,
            success
          } = OBJECT;
          dsBridge.call(
            "VIDEO.preview", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              }
            }
          );
          console.log("HC.VIDEO.preview");
        },
      },
      FILE: {
        choose: function (OBJECT) {
          const {
            count,
            extension,
            success
          } = OBJECT;
          dsBridge.call(
            "FILE.choose", {
            count: count,
            extension: extension,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    tempFilePaths: ret.tempFilePaths,
                    tempFiles: ret.tempFiles,
                  });
              }
            }
          );
          console.log("HC.FILE.choose");
        },
        download: function (OBJECT) {
          const {
            path,
            success
          } = OBJECT;
          dsBridge.call(
            "FILE.download", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    localPath: ret,
                  });
              }
            }
          );
          console.log("HC.FILE.download");
        },
      },
      AUDIO: {
        startRecord: function (OBJECT) {
          const {
            success
          } = OBJECT;
          dsBridge.call("AUDIO.startRecord", function (ret) {
            if (ret) {
              success &&
                success({
                  data: "result",
                });
            }
          });
          console.log("HC.AUDIO.startRecord");
        },
        endRecord: function (OBJECT) {
          const {
            success
          } = OBJECT;
          dsBridge.call("AUDIO.endRecord", function (ret) {
            if (ret) {
              success &&
                success({
                  tempFilePaths: ret.tempFilePaths,
                  tempFiles: ret.tempFiles,
                  duration: 0,
                  size: 0,
                });
            }
          });
          console.log("HC.AUDIO.endRecord");
        },
        play: function (OBJECT) {
          const {
            path,
            success
          } = OBJECT;
          dsBridge.call(
            "AUDIO.play", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              }
            }
          );
          console.log("HC.AUDIO.play");
        },
      },
      CAMERA: {
        scanCode: function (OBJECT) {
          const {
            sourceType,
            scanType,
            success
          } = OBJECT;
          dsBridge.call(
            "CAMERA.scanCode", {
            sourceType: ["album", "camera"],
            scanType: ["qrCode", "barCode"],
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    result: ret.result,
                    scanType: ret.scanType,
                  });
              }
            }
          );
          console.log("HC.CAMERA.scanCode");
        },
      },
      SQLITE: {
        execute: function (OBJECT) {
          const {
            database,
            sql,
            success,
            fail,
            complete
          } = OBJECT;
          console.log("run HC.SQLITE.execute");
          console.log("params:", database, sql);
          dsBridge.call(
            "SQLITE.execute", {
            database: database,
            sql: sql,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              } else {
                fail && fail("error message");
              }
              complete && complete();
            }
          );
        },
        query: function (OBJECT) {
          const {
            database,
            sql,
            results,
            success,
            fail,
            complete
          } = OBJECT;
          console.log("run HC.SQLITE.query");
          dsBridge.call(
            "SQLITE.query", {
            database: database,
            sql: sql,
            results: results,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              } else {
                fail && fail("error message");
              }
              complete && complete();
            }
          );
        },
      },
      MQTT: {
        subscribe: function (OBJECT) {
          const {
            address,
            port,
            username,
            password,
            topics,
            success,
            fail,
            complete,
          } = OBJECT;

          if (true) {
            success &&
              success({
                data: "execute result",
              });
          } else {
            fail && fail("error message");
          }
          complete && complete();
          console.log("HC.MQTT.subscribe");
        },
        unsubscribe: function (OBJECT) {
          const {
            success,
            fail,
            complete
          } = OBJECT;

          if (true) {
            success &&
              success({
                data: "execute result",
              });
          } else {
            fail && fail("error message");
          }
          complete && complete();
          console.log("HC.MQTT.unsubscribe");
        },
        onReceive: function (Function) {
          const fn = Function;
          console.log("HC.MQTT.onReceive");
          return "HC.MQTT.onReceive";
        },
      },
      NOTIFY: {
        onClick: function (Function) {
          const fn = Function;
          console.log("HC.NOTIFY.onClick");
          return "HC.NOTIFY.onClick";
        },
      },
      WEBVIEW: {
        open: function (Object) {
          const {
            path,
            success
          } = Object;
          dsBridge.call(
            "WEBVIEW.open", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              }
            }
          );
          console.log("HC.WEBVIEW.open");
        },
        close: function () {
          console.log("HC.WEBVIEW.close");
          return dsBridge.call("WEBVIEW.close");
        },
        replace: function (Object) {
          const {
            path,
            success
          } = Object;
          dsBridge.call(
            "WEBVIEW.replace", {
            path: path,
          },
            function (ret) {
              if (ret) {
                success &&
                  success({
                    data: ret,
                  });
              }
            }
          );
          console.log("HC.WEBVIEW.replace");
        },
        onShow: function (OBJECT) {
          console.log("HC.WEBVIEW.onShow");
          return "HC.WEBVIEW.onShow";
        },
        onBack: function (OBJECT) {
          console.log("HC.WEBVIEW.onBack");
          return "HC.WEBVIEW.onBack";
        },
      },
    };
  </script>
</head>

<body>
  <div id="app">
    <van-cell value="NATIVE接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickNATIVEGetVersion">getVersion
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickNATIVEGetVersionSync">getVersionSync
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickNATIVEUpdate">Update
        </van-button>
      </van-col>
    </van-row>
    <van-cell value="APP接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickAPPGetVersion">getVersion
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickAPPGetVersionSync">getVersionSync
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickAPPUpdate">update
        </van-button>
      </van-col>
    </van-row>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickGetLang">getLang
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickGetLangSync">getLangSync
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="IMAGE接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickIMAGEchoose">choose
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickIMAGEpreview">preview
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="VIDEO接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickVIDEOchoose">choose
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickVIDEOpreview">preview
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="FILE接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickFILEchoose">choose
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickFILEdownload">download
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="AUDIO接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickAUDIOstartRecord">startRecord
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickAUDIOendRecord">endRecord
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickAUDIOplay">play</van-button>
      </van-col>
    </van-row>

    <van-cell value="CAMERA接口"></van-cell>
    <van-button type="primary" @click="onClickCAMERAscanCode">scanCode
    </van-button>

    <van-cell value="SQLITE接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickSQLITEexecuteInsert">execute(insert)
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickSQLITEexecuteUpdate">execute(update)
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickSQLITEexecuteDelete">execute(delete)
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickSQLITEexecuteQuery">execute(query)
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="MQTT接口"></van-cell>

    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickMQTTSubscribe">subscribe
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickMQTTunsubscribe">unsubscribe
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickMQTTonReceive">onReceive
        </van-button>
      </van-col>
    </van-row>

    <van-cell value="NOTIFY接口"></van-cell>
    <van-button type="primary" @click="onClickNOTIFYonClick">onClick
    </van-button>

    <van-cell value="WEBVIEW接口"></van-cell>
    <van-row gutter="5">
      <van-col>
        <van-button type="primary" @click="onClickWEBVIEWopen">open
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickWEBVIEWclose">close
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickWEBVIEWreplace">replace
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickWEBVIEWOnShow">onShow
        </van-button>
      </van-col>
      <van-col>
        <van-button type="primary" @click="onClickWEBVIEWOnBack">onBack
        </van-button>
      </van-col>
    </van-row>
    <van-cell value="跳转"></van-cell>
    <van-button type="primary" @click="ToAppIndex">跳转到{{redirectName}}
    </van-button>
    <h2>测试vue-router</h2>
    <p>路由
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <p>动态路由
      <router-link to="/user/123">Go to User</router-link>
    </p>
    <p>命名路由
      <router-link :to="{ name: 'user', params: { id: 343 } }">Go to User2</router-link>
    </p>
    <p>嵌套路由
      <router-link to="/user/123/uerinfo">Go to UserInfo</router-link>
    </p>
    <p>编程式导航
      <van-button type="default" @click="toUserPush">ToUserPush</van-button>
      <van-button type="default" @click="toUserReplace">ToUserReplace</van-button>
      <van-button type="default" @click="back">后退一步</van-button>
    </p>

    <p>重定向
      <router-link to="/foo1">Foo1 to Foo2</router-link>
    </p>
    <p>传参
      <router-link to="/pass/3333">To Pass1</router-link>
      <router-link to="/pass">To Pass2</router-link>
      <button @click="passquery">To Pass3</button>
    </p>
    <router-view></router-view>
    <h2>-------</h2>
  </div>

  <script>
    const Foo = {
      template: '<div>foo</div>'
    }
    const Foo1 = {
      template: '<div>foo1</div>'
    }
    const Foo2 = {
      template: '<div>foo2</div>'
    }
    const Bar = {
      template: '<div>bar</div>'
    }
    const UserInfo = {
      template: '<div>UserInfo</div>'
    }
    const Pass = {
      props: ['id'],
      template: '<div>Pass {{ id }}</div>'
    }
    const PassQuery = {
      template: '<div>Pass</div>'
    }
    const User = {
      template: `
       <div class="user">
         <h2>User {{ $route.params.id }}</h2>
         <router-view></router-view>
       </div>
     `
    }
    const routes = [{
      path: '/foo',
      component: Foo
    },
    {
      path: '/foo1',
      redirect: '/foo2',
      component: Foo1
    },
    {
      path: '/foo2',
      component: Foo2
    },
    {
      path: '/bar',
      component: Bar
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      children: [{
        path: 'uerinfo',
        component: UserInfo
      }],
    },
    {
      path: '/pass/:id',
      component: Pass,
      props: true
    },
    {
      path: '/pass',
      component: Pass,
      props: {
        id: 'MMMM'
      }
    },
    {
      path: '/passquery/:id',
      component: PassQuery,
    },
    ]

    const router = new VueRouter({
      routes
    })
    new Vue({
      el: "#app",
      router,
      data() {
        return {
          redirectName: "",
        };
      },

      mounted() {

      },

      methods: {
        toUserPush() {
          const userId = 34
          router.push({
            path: `/user/${userId}`
          })
        },
        toUserReplace() {
          const userId = 44
          router.replace({
            path: `/user/${userId}`
          })
        },
        back() {
          router.go(-1)
        },
        passquery() {
          this.$router.push({
            path: '/passquery',
            query: {
              id: 2
            }
          })
          vant.Toast(this.$route.query.id)
        },
        ToAppIndex() {
          location.href = location.href.includes("start") ?
            "../app/index.html" :
            "../start/index.html";
        },
        onClickNATIVEGetVersion() {
          HC.NATIVE.getVersion({
            success: function (res) {
              vant.Toast("success: " + res.data);
            },
          });
        },
        onClickNATIVEGetVersionSync() {
          // 无参数
          let res = HC.NATIVE.getVersionSync();
          vant.Toast("native getVersionSync: " + res);
        },
        onClickNATIVEUpdate() {
          HC.NATIVE.update({
            path: "NativeFilePath",
            success: function (res) {
              console.log(res);
              vant.Toast("success: " + res.data);
            },
            fail: function (err) {
              console.log(err.error);
              vant.Toast("fail");
            },
          });
        },
        onClickAPPGetVersion() {
          HC.APP.getVersion({
            success: function (res) {
              console.log(res);
              vant.Toast("success: " + res.data);
            },
            fail: function (err) {
              console.log(err.error);
              vant.Toast("fail");
            },
          });
        },
        onClickAPPGetVersionSync() {
          // 无参数
          let res = HC.APP.getVersionSync();
          vant.Toast("app getVersionSync: " + res);
        },
        onClickAPPUpdate() {
          HC.APP.update({
            path: "http://hanma-tylr.hc-iiot.com/extimg/1627437612459app.zip",
            success: function (res) {
              console.log(res);
              vant.Toast("success: " + res.data);
            },
            fail: function (err) {
              console.log(err.error);
              vant.Toast("fail");
            },
          });
        },

        onClickGetLang() {
          HC.APP.getLang({
            success: function (res) {
              console.log(res.lang);
              vant.Toast("success:   " + res.lang);
            },
          });
        },
        onClickGetLangSync() {
          const lang = HC.APP.getLangSync();
          console.log("当前系统语言编码：", lang);
          vant.Toast("当前系统语言编码：" + lang);
        },

        onClickIMAGEchoose() {
          HC.IMAGE.choose({
            count: 6, //默认9
            extension: ["png"],
            sourceType: ["album"], //从相册选择
            success: function (res) {
              console.log(res.tempFilePaths);
              console.log(res.tempFiles);
              vant.Toast(
                "success:\n" +
                "tempFilePaths:  " +
                res.tempFilePaths +
                "\n" +
                "tempFiles:   " +
                res.tempFiles
              );
            },
          });
        },

        onClickIMAGEpreview() {
          HC.IMAGE.preview({
            current: 6,
            paths: ["ccccc.png"],
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
          });
        },
        onClickVIDEOchoose() {
          HC.VIDEO.choose({
            count: 6, //默认9
            extension: ["png"],
            sourceType: ["album"], //从相册选择
            success: function (res) {
              console.log(res.tempFilePaths);
              console.log(res.tempFiles);
              console.log(res.duration);
              console.log(res.size);
              vant.Toast(
                "success:\n" +
                "tempFilePaths:  " +
                res.tempFilePaths +
                "\n" +
                "tempFiles:   " +
                res.tempFiles +
                "\n" +
                "duration:   " +
                res.duration +
                "\n" +
                "size:   " +
                res.size
              );
            },
          });
        },
        onClickVIDEOpreview() {
          HC.VIDEO.preview({
            path: "ccccc.mp4",
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
          });
        },
        onClickFILEchoose() {
          HC.FILE.choose({
            count: 6, //默认9
            extension: ["png", "pdf"],
            success: function (res) {
              console.log(res.tempFilePaths);
              console.log(res.tempFiles);
              vant.Toast(
                "success:\n" +
                "tempFilePaths:  " +
                res.tempFilePaths +
                "\n" +
                "tempFiles:   " +
                res.tempFiles
              );
            },
          });
        },
        onClickFILEdownload() {
          HC.FILE.download({
            path: "",
            success: function (res) {
              console.log(res.localPath);
              vant.Toast("success:　" + res.localPath);
            },
          });
        },
        onClickAUDIOstartRecord() {
          HC.AUDIO.startRecord({
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
          });
        },
        onClickAUDIOendRecord() {
          HC.AUDIO.endRecord({
            success: function (res) {
              console.log(res.tempFilePaths);
              console.log(res.tempFiles);
              console.log(res.duration);
              console.log(res.size);
              vant.Toast(
                "success:\n" +
                "tempFilePaths:  " +
                res.tempFilePaths +
                "\n" +
                "tempFiles:   " +
                res.tempFiles +
                "\n" +
                "duration:   " +
                res.duration +
                "\n" +
                "size:   " +
                res.size
              );
            },
          });
        },
        onClickAUDIOplay() {
          HC.AUDIO.play({
            path: "ccccc.mp3",
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
          });
        },
        onClickCAMERAscanCode() {
          HC.CAMERA.scanCode({
            sourceType: ["album", "camera"],
            scanType: ["qrCode", "barCode"],
            success: function (res) {
              console.log(res.result);
              console.log(res.scanType);
              vant.Toast(
                "success:\n" +
                "result:  " +
                res.result +
                "\n" +
                "scanType:   " +
                res.scanType
              );
            },
          });
        },
        onClickSQLITEexecuteInsert() {
          HC.SQLITE.execute({
            database: "hancode_app_data.db",
            sql: `INSERT INTO app_version (release_version,release_content) VALUES (11,'测试内容')`,
            success: function (res) {
              console.log("success", res);
              vant.Toast("success  \n" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail", err.toString());
              vant.Toast("fail  \n" + err.toString());
            },
            complete: function () {
              console.log("complete");
            },
          });
        },
        onClickSQLITEexecuteUpdate() {
          HC.SQLITE.execute({
            database: "hancode_app_data.db",
            sql: `UPDATE app_version SET release_content = '修改测试内容' WHERE id = 1`,
            success: function (res) {
              console.log("success", res);
              vant.Toast("success  \n" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail", err.toString());
              vant.Toast("fail  \n" + err.toString());
            },
            complete: function () {
              console.log("complete");
            },
          });
        },
        onClickSQLITEexecuteDelete() {
          HC.SQLITE.execute({
            database: "hancode_app_data.db",
            sql: `DELETE FROM app_version WHERE id = 2`,
            success: function (res) {
              console.log("success", res);
              vant.Toast("success  \n" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail", err.toString());
              vant.Toast("fail  \n" + err.toString());
            },
            complete: function () {
              console.log("complete");
            },
          });
        },
        onClickSQLITEexecuteQuery() {
          HC.SQLITE.query({
            database: "hancode_app_data.db",
            sql: `SELECT * FROM hancode_page`,
            results: [{
              key: "id",
              type: "int",
            },
            {
              key: "name",
              type: "string",
            },
            {
              key: "description",
              type: "string",
            },
            ],
            success: function (res) {
              console.log("success", res);
              vant.Toast("success  \n" + JSON.stringify(res));
            },
            complete: function () {
              console.log("complete");
            },
          });
        },
        onClickMQTTSubscribe() {
          HC.MQTT.subscribe({
            address: "",
            port: "",
            username: "",
            password: "",
            topics: [],
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
            fail: function () { },
            complete: function () { },
          });
        },
        onClickMQTTunsubscribe() {
          HC.MQTT.unsubscribe({
            success: function () {
              console.log("success");
              vant.Toast("success");
            },
            fail: function () { },
            complete: function () { },
          });
        },
        onClickMQTTonReceive() {
          HC.MQTT.onReceive(function (data) {
            console.log(data);
          });
          vant.Toast("success");
        },
        onClickNOTIFYonClick() {
          HC.NOTIFY.onClick(function (data) {
            console.log(data);
          });
          vant.Toast("success");
        },
        onClickWEBVIEWopen() {
          HC.WEBVIEW.open({
            path: "/#/workbench?name=abc",
            success: function () {
              console.log("open success");
              vant.Toast("open success");
            },
          });
        },
        onClickWEBVIEWclose() {
          vant.Toast(HC.WEBVIEW.close());
        },
        onClickWEBVIEWreplace() {
          HC.WEBVIEW.replace({
            path: "app/index.html",
            success: function () {
              console.log("replace success");
              vant.Toast("replace success");
            },
          });
        },
        onClickWEBVIEWOnShow() {
          vant.Toast(HC.WEBVIEW.onShow());
        },
        onClickWEBVIEWOnBack() {
          vant.Toast(HC.WEBVIEW.onBack());
        },
      },
    });
  </script>
</body>

<style>
  #app {
    margin-left: 6px;
  }

  .van-col {
    margin-top: 3px;
    margin-bottom: 10px;
  }
</style>

</html>